<template>
    <div v-loading="vLoading" element-loading-text="拼命加载中">
        <el-row>
            <el-col :span="8" :offset="2" v-for="item in userData" :key="item">
                <div style="border:solid gainsboro; border-radius: 9px;   margin-bottom: 15px;background-color: whitesmoke;height: auto;">
                    <el-container>
                        <el-aside style="width: auto;align-content: center;">
                            <el-button  type="text" @click="$store.dispatch('resumeDialogVisible',item.userId)">
                            <el-avatar :src="item.headIcon" :size="70" style="margin-left: 15px;"></el-avatar></el-button>
                        </el-aside>
                        <el-main style="width: 300px;">
                            <el-row>
                                <el-col :span="15">
                                    <el-button  type="text" @click="$store.dispatch('resumeDialogVisible',item.userId)">
                                        <span style="font-size: 20px;color: black;">{{ item.username }}</span>
                                    </el-button>
                                    
                                </el-col>
                                <el-col :span="1">
                                    <el-button type="text" style="padding: 0px;">
                                        <i :class="[item.isCollected?'el-icon-star-on':'el-icon-star-off']"  class="collectIcon" @click="a=>{$store.dispatch('collectStatusChange', item);}"
                                     style="font-size: 30px;padding-top: 1px;"></i></el-button>
                                </el-col>
                            </el-row>
                            <div style="background-color: black;padding: 0.5px;"></div>
                            <span style="font-size: 14px;">学历：{{ degreeToString(item.degree) }}</span>
                            <span style="font-size: 14px;margin-left: 15px;">电话：{{ item.telephone }}</span>
                            
                        </el-main>
                    </el-container>
                </div>
            </el-col>
        </el-row>
        <div class="block custom-pagination" style="text-align: center;margin-top: 10px;">
        <el-pagination :page-size="pageStrategy.pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[1, 4, 7, 10]"
                        :current-page="pageStrategy.pageNum"  :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        </div>
    </div>
</template>

<script>
import { getCollectedUsers } from '@/api/self'

export default {
    data() {
        return {
            vLoading:false,
            total:null,
            pageStrategy:{
                pageNum:1,
                pageSize:10,
            },
            userData: []
        }
    },
    methods:{
        degreeToString(num){
            switch(num){
            case "0":return"中学"; break;
            case "1":return"高中"; break;
            case "2":return"中专"; break;
            case "3":return"大专"; break;
            case "4":return"本科"; break;
            case "5":return"硕士"; break;
            case "6":return"博士"; break;
        }
        },
        handleCurrentChange(val){
            this.pageStrategy.pageNum=val
            this.query()
        },
        handleSizeChange(val){
            this.pageStrategy.pageSize=val
            this.pageStrategy.pageNum=1
            this.query()
        },
        query(){
            this.vLoading=true
            getCollectedUsers(this.pageStrategy).then(res=>{
            console.log(res);
            res.data.list.forEach(element => {
                element.isCollected=true
            });
            this.userData=res.data.list
            this.total=res.data.total
            this.vLoading=false
        })
        }
    },
    mounted(){
        this.query()
    }

}
</script>

<style></style>